<script>
import { layer } from "@layui/layui-vue";
export default {
  name: "LoginPage",
  data(){
    return{
      loginData:{
        username:'',
        password:''
      },
      currentLoginInfo:{
        loginId:'',
        loginDevice:''
      }
    }
  },
  methods:{
    submitLogin(){
      this.$axios.post('/java/user/doLogin',this.loginData).then(res=>{
        console.log(res.data);
        console.log(res.data.data);
        console.log(res.data.data.loginId);
        console.log(res.data.data.loginDevice);
        if (res.data.code===200){
          this.currentLoginInfo.loginId=res.data.data.loginId;
          this.currentLoginInfo.loginDevice=res.data.data.loginDevice;
          localStorage.setItem('currentLoginInfo', JSON.stringify(this.currentLoginInfo));

          this.$router.push('/work');
        }else {
          console.log(res.data.msg);
          layer.msg(res.data.msg, { icon : 2, time: 1000})
        }
      }).catch(err=>{
        console.log(err)
      })
      // this.$router.push('/work');
    },
    clearLogin(){
      this.$refs.loginFormRef.reset();

    }
  },
  mounted() {
    if (this.loginData.username===''){
      this.$refs.uidRef.focus();
    }
  },
  watch:{

  }
}
</script>

<template>
  <div class="login-page">

    <lay-card  shadow="hover"
              style="width: 555px;height: 370px;padding: 15px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">

      <template v-slot:title>
        <p style="text-align: center;font-size: 18px">系统登录</p>
      </template>

      <lay-form required ref="loginFormRef" :model="loginData" :label-position="'top'" style="width: 500px">
        <lay-form-item label="账户" prop="username" tips="账户是您的登录凭据，可以在注册电子邮件中找到" >
          <lay-input ref="uidRef" v-model="loginData.username" :maxlength="15" :allow-clear="true"></lay-input>
        </lay-form-item>
        <lay-form-item label="密码" prop="password" tips="密码应当包含字母、数字和特殊符号中的任意两种" >
          <lay-input v-model="loginData.password" @keyup.enter="submitLogin" type="password" :maxlength="15" :allow-clear="true"></lay-input>
        </lay-form-item>
        <lay-form-item style="text-align: center;">
          <lay-button type="primary" @click="submitLogin">登录</lay-button>
          <lay-button  @click="clearLogin">重置</lay-button>
        </lay-form-item>
      </lay-form>

    </lay-card>

  </div>
</template>


<style scoped>
/*
//在 CSS 中，height: 100vh; 这个属性值表示元素的高度设置为视口（viewport）高度的 100%。
这意味着，无论屏幕大小如何，元素都将占据整个屏幕的高度
确保 height: 100vh; 只应用于特定的组件或页面，而不是全局样式。
例如，如果你只在登录页面上需要这个样式，那么你应该只在登录页面的组件样式中使用它
*/
.login-page{
  background-color: #5fb878;

  height: 100vh;

}

</style>